<template>
    <el-carousel ref="carousel" trigger="click" height="100%" :pause-on-hover="false" :interval="10000" arrow="always">
        <el-carousel-item v-for="item in imageList" :key="item">
            <el-image :src="item" fit="fill"></el-image>
        </el-carousel-item>
    </el-carousel>
</template>

<script setup>
import { nextTick, onBeforeMount, ref } from 'vue'
import axios from 'utils/axios.js'

const carousel = ref(null)
const imageList = ref([])
onBeforeMount(async () => {
    const res = await axios.get('/imageList/index')
    if (res && res.code === 0) {
        imageList.value = res.data
        nextTick(() => {
            carousel.value.setActiveItem(0)
        })
    }
})
</script>

<style scoped>
.el-carousel {
    height: 100%;
}
/* .el-carousel__indicator {
    color: #409eff;
} */
:deep(.el-carousel__button) {
    background-color: #409eff;
    height: 8px;
    border-radius: 3px;
}
:deep(.el-carousel__arrow) {
    height: 50px;
    width: 50px;
}
:deep(.el-icon-arrow-left),
:deep(.el-icon-arrow-right) {
    font-size: 20px;
}
.el-image {
    height: 100%;
    width: 100%;
}
</style>
